<template>
  <div class="demo-button">
    <h4>基础用法</h4>
    <section>
      <xd-button class="mr10">Button</xd-button>
      <xd-button label="Button" />
    </section>
    <section>
      <h4>不同状态</h4>
      <xd-button
        v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
        class="mr10"
        :label="item"
        :key="item"
        :status="item"
      />
    </section>
    <section>
      <h4>图标按钮</h4>
    </section>
    <section>
      <h4>禁用按钮</h4>
    </section>
    <section>
      <h4>加载中</h4>
    </section>
    <section>
      <h4>不同尺寸</h4>
      <xd-button
        v-for="item in ['large', 'normal', 'mini']"
        class="mr10"
        :label="item"
        :key="item"
        :size="item"
      />
    </section>
    <section>
      <h4>按钮组</h4>
    </section>
  </div>
</template>

<script>
export default {
  name: "Button",
};
</script>
